<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=3,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>首页</title>
    <link href="../css/reset-html5.css" rel="stylesheet">
    <link href="../css/mui.min.css" rel="stylesheet">
    <link href="../css/wx-main.css?20161105" rel="stylesheet">
    <script src="../js/jquery-2.2.1.min.js"></script>
    <script src="../plugins/vue/vue.min.js"></script>
    <script src="../js/mui.min.js"></script>
    <style>
        .img_1{
            width: 100%;
        }

    </style>
</head>
<body class="body-bg" id="main">

<!--轮播图片 start-->
<div id="slider" class="mui-slider">
    <div class="mui-slider-group mui-slider-loop">
        <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
        <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="#">
                <img src="../index_images/index_3.jpg?v=20161112">
            </a>
        </div>
        <!-- 第一张 -->
        <div class="mui-slider-item">
            <a href="https://h5.koudaitong.com/v2/showcase/homepage?alias=ejy1996a&redirect_count=1">
                <img src="../index_images/index_1.jpg?v=20161132">
            </a>
        </div>
        <!-- 第二张 -->
        <div class="mui-slider-item">
            <a href="#">
                <img src="../index_images/index_2.jpg?v=20161112">
            </a>
        </div>
        <!-- 第三张 -->
        <div class="mui-slider-item">
            <a href="#">
                <img src="../index_images/index_3.jpg?v=20161130">
            </a>
        </div>
        <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
        <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="https://h5.koudaitong.com/v2/showcase/homepage?alias=ejy1996a&redirect_count=1">
                <img src="../index_images/index_1.jpg?v=20161112">
            </a>
        </div>
    </div>
    <div class="mui-slider-indicator">
        <div class="mui-indicator mui-active"></div>
        <div class="mui-indicator"></div>
        <div class="mui-indicator"></div>
    </div>
</div>
<!--轮播图片 end-->

    <div class="index-section1 mar-hor mar-top">
        <div class="left white-bg showdow-1" onclick="location.href='select_fault.html?14561'">
            <img src="../images/maintain.png" class="img1" id="img1">
            <div class="right">
                <h4 class="text-color2 text-center text1">维修下单</h4>
                <p class="text-color2 text2" style="margin-top: 15px"><span>上门</span><span>到店</span></p>
            </div>
        </div>
        <div class="right white-bg showdow-1" onclick="location.href='my_order.html'">
            <img src="../images/order.png" class="img2">
            <div>
                <p class="text-color2 text3">我的订单</p>
            </div>
        </div>
    </div>

    <div class="index-section2 mar-top white-bg showdow-1">
        <ul class="li-inline">
            <li class="text-color3" v-on:click="go_brand(1)">苹果</li>
            <li class="text-color3" v-on:click="go_brand(4)">华为</li>
            <li class="text-color3" v-on:click="go_brand(6)">OPPO</li>
            <li class="text-color3" v-on:click="go_brand(5)">三星</li>
        </ul>
    </div>
    <p class="primary-text mar-top" style="padding-left: 15px;font-size: 16px;font-weight: bold">常见机型</p>

    <div class="index-section2 mar-top">
        <ul class="li-inline index-phone-list">
            <li v-for="list in index_phone_list" v-on:click="go(list.phone_id,list.type_id)" class="showdow-1">
                <img v-bind:src="'../index_images/'+list.img_url" class="img_1">
                <p class="text-center text-color2 mar-top" v-text="list.name"></p>
            </li>
        </ul>
    </div>

    <!--<div class="mar-top">-->
        <!--<img src="../images/service_contact.png" style="width: 100%">-->
    <!--</div>-->

    <div class="index-section2 mar-top mar-btm white-bg pad-top15 showdow-1" style="padding-bottom: 15px">
        <ul class="index_list_3">
            <li onclick="location.href='service_process.html'">
                <img src="../images/foot_img_1.png">
                <p class="text-color2">服务流程</p>
            </li>
            <li onclick="location.href='FAQ.html'">
                <img src="../images/foot_img_2.png">
                <p class="text-color2">常见问题</p>
            </li>
            <li onclick="location.href='show_comment.html'">
                <img src="../images/foot_img_3.png">
                <p class="text-color2">客户评价</p>
            </li>
        </ul>
    </div>

<div>
    <p class="text-color3 text-center mar-top mar-btm">服务热线：<a href="tel:400-030-1388">400-030-1388</a></p>
</div>
</body>
<script src="../js/phone.js?123"></script>
<script>
    //轮播
    mui("#slider").slider({
        interval: 7000
    });


    var vue =new Vue({
        el:'#main',
        data:{
            'index_phone_list':''
        },
        methods:{
            'show_index_phone_list':function(data){
                this.index_phone_list = data;
            },
            'go':function(oid,id){
                location.href='select_fault.html?oid='+oid+'&id='+id;
            },
            'go_brand':function(id){
                location.href='select_fault.html?id='+id;
            }
        },
        ready:function(){
//            this.show_index_phone_list();
        }
    });


    $.post('../index/index.php?m=Home&c=Index&a=index',{},function(res){
        if(res.code==200){
            vue.show_index_phone_list(res.data);
        }else if(res.code==0){
            login();
        }
    },'json');


</script>
</html>